<template>
<div class="demand-data-main">
  <div class="water-polo" ref="chartWaterPolo"></div>
  <div class="details-button" @click="goDemandDetails">
    <span class="details-button-text">编辑</span>
    <img src="@/assets/images/dataCentre/recruitmentProgress/righticon.png" alt="" class="right-icon">
  </div>
  <div class="data-list">
    <img src="@/assets/images/dataCentre/recruitmentProgress/quxian.png" alt="" class="curve">
    <div class="data-view" v-if="listData">
      <div class="data-item" v-for="(item,index) in jobPostingField" :key="index">
        <img src="@/assets/images/dataCentre/recruitmentProgress/datamod.png" alt="">
        <div class="data-text">
          <div>{{ item.title }}</div>
          <div>{{ listData[item.field] || 0 }}</div>
        </div>
      </div>
      <div class="data-item" @click="goProgressDetails">
        <img src="@/assets/images/dataCentre/recruitmentProgress/xxsj.png" alt="">
        <div class="data-text2">详细数据</div>
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import {onMounted, onUnmounted, reactive, ref, Ref, watch} from "vue";
import { useECharts } from '@/hooks/web/useECharts'
import { recruitProcessTotal } from '@/api/data-center/recruitment-progress.ts'
import "echarts-liquidfill/src/liquidFill.js"; // 在需要水滴图的页面js引入
import fieldObjects from "./data/fieldObjects.ts"
import {useRouter} from "vue-router";

const router = useRouter();
const chartWaterPolo = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartWaterPolo as Ref<HTMLDivElement>)

const props = defineProps({
  navInfo:{
    type:Object,
    default:{
      navIndex:0,
      checkNav:[],
      dateValue:{}
    }
  },
  selectedCity:{
    type:Object,
    default:{}
  }
})

const watchObj =  watch(
  () =>props.navInfo,() => {getChartData()},{deep: true}
)

const watchSelectedCity = watch(
  () =>props.selectedCity,() => {getChartData()},{deep: true}
)

onMounted(() => {
  getChartData()
})

onUnmounted(()=>{
  watchObj()
  watchSelectedCity()
})

// 接口返回的招聘进度数据
const listData = ref(null)

// 招聘信息字段对象
const jobPostingField = ref(fieldObjects)

/**
 * 调整需求详情页
 * @param item
 */
function goDemandDetails(item:Object) {
  router.push({ path: '/data/DemandDetails' })
}

/**
 * 跳转招聘进度详情页
 * @param item
 */
function goProgressDetails(item:Object) {
  router.push({ path: '/data/ProgressDetails' })
}

// 请求信息标记（用于对比异步请求）
let reqMark = null
/**
 * 获取招聘进度数据
 */
const getChartData = async () => {
  const index = props.navInfo.navIndex || 0
  const reqJson = {
    "country": index===1?props.navInfo.checkNav[1].value:'',
    "province": index===2?props.navInfo.checkNav[2].value:'',
    "area": index===2?props.selectedCity.value:'',
    "year":props.navInfo.dateValue.year,
    "begin":props.navInfo.dateValue.beginTime,
    "end":props.navInfo.dateValue.endTime,
  }
  reqMark = reqJson
  const res = await recruitProcessTotal(reqJson)
  if(reqMark===reqJson){
    listData.value = res
    initWaterPolo()
  }
}
/**
 * 初始化水球图
 */
const initWaterPolo = () => {
  const proportionalSize = (listData.value.allEntryNum/listData.value.recruitNum).toFixed(2)
  const optionWaterPolo = {
    title: {
      text: '',
    },
    graphic: [{
      type: 'group',
      left: 'center',
      top: '60%',
      children: [{
        type: 'text',
        z: 100,
        left: '10',
        top: 'middle',
        style: {
          fill: '#fff',
          text: '招聘需求',
          fontSize: 16
        }
      }]
    },{
      type: 'group',
      left: 'center',
      top: '38%',
      children: [{
        type: 'text',
        z: 100,
        left: '10',
        top: 'middle',
        style: {
          fill: '#fff',
          text: listData.value.recruitNum,
          fontSize: 32,
          fontWeight: 500
        }
      }]
    }],
    series: [
      {
        type: 'liquidFill',
        radius: '68.1%',
        center: ['50%', '50%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#95C4FF', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#016FFC', // 100% 处的颜色
              },
            ],
          },
        ],
        data: [proportionalSize], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 0,
          opacity:0
        },
        outline: {
          show: false,
        },
        itemStyle: {
          opacity: 0.95,
          shadowColor: 'rgba(0, 0, 0, 0)',
        },
        label:{
          show:false
        }
      },
    ],
  };
  setOptions(optionWaterPolo)
}
</script>

<style scoped lang="less">
.demand-data-main{
  position: absolute;
  left: 166px;
  top: 87px;
  z-index: 2;
  .data-list{
    margin-top: 13px;
    position: relative;
    .curve{
      width: 142px;
      height: calc(100vh - 260px);
      position: absolute;
      left: -88px;
      top: -40px;
      z-index: 1;
    }
    .data-view{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(100vh - 300px);
    }
    .data-item{
      display: flex;
      align-items: center;
      &:nth-of-type(2){
        transform: translateX(-40px);
      }
      &:nth-of-type(3){
        transform: translateX(-70px);
      }
      &:nth-of-type(4){
        transform: translateX(-82px);
      }
      &:nth-of-type(5){
        transform: translateX(-94px);
      }
      &:nth-of-type(6){
        transform: translateX(-90px);
      }
      &:nth-of-type(7){
        transform: translateX(-76px);
      }
      &:nth-of-type(8){
        transform: translateX(-54px);
      }
      &:nth-of-type(9){
        transform: translateX(-24px);
      }
      &:nth-of-type(10){
        transform: translateX(24px);
      }
      img{
        width: 38px;
        height: 38px;
      }
      .data-text{
        margin-left: 8px;
        min-width: 200px;
      }
      .data-text2{
        margin-left: 8px;
        cursor: pointer;
        color: #1C7EFC;
        border-bottom: 1px solid #1C7EFC;
        line-height: 16px;
      }
    }
  }
  .details-button{
    width: 55px;
    height: 24px;
    background: #F5F6FE;
    box-shadow: 0 5px 32px 0 rgba(86,112,203,0.1);
    border: 1px solid #FFFFFF;
    border-radius: 12px 12px 12px 0;
    position: absolute;
    top: 28px;
    right: -16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .right-icon{
      width: 19px;
      height: 19px;
    }
    .details-button-text{
      color: #8C9DC7;
      font-size: 13px;
    }
  }
  .water-polo{
    width: 147px;
    height: 147px;
    background-image: url("@/assets/images/dataCentre/recruitmentProgress/water-polo.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: relative;
  }
}
</style>
